<template>
  <div class="posttable">
    <el-row>
      <el-col :span="24" style="padding-right: 30px;padding-left: 40px;">
        <div class="addform">
          <el-form :label-position="labelPosition" ref="form" :model="form" :rules="rules">
            <el-row>
              <el-col :span="5">
                <el-form-item label="推送" prop="push">
                  <el-select v-model="form.push" placeholder="请选择是否推送">
                    <el-option label="是" value="是"></el-option>
                    <el-option label="否" value="否"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item label="客户名称" prop="customerName">
                  <el-select
                    v-model="form.customerName"
                    placeholder="请选择客户"
                    @change="postHandler()"
                  >
                    <el-option
                      v-for="item in customerNa"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item label="简历来源" prop="origin" class="dutyM">
                  <el-select v-model.trim="form.origin" placeholder="请选择简历来源">
                    <el-option
                      v-for="item in originlist"
                      :key="item.value"
                      :label="item.value"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item label="性别" prop="sex" class="dutyM">
                  <el-select v-model.trim="form.sex" placeholder="请选择性别">
                    <el-option label="男" value="男"></el-option>
                    <el-option label="女" value="女"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="5">
                <el-form-item label="姓名" prop="name" style="margin-bottom: 10px;">
                  <el-input v-model.trim="form.name" placeholder="请输入姓名" style="width:274px;"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item
                  label="联系方式"
                  prop="phone"
                  style="margin-bottom: 10px;"
                  :rules="PhoneRules"
                >
                  <el-input v-model.trim="form.phone" placeholder="请输入联系方式" style="width:274px;"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item
                  label="联系邮箱"
                  prop="email"
                  style="margin-bottom: 10px;"
                  :rules="EmailRules"
                >
                  <el-input v-model.trim="form.email" placeholder="请输入联系邮箱" style="width:274px;"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item label="面试职位" prop="interviewPost" class="dutyM">
                  <el-select
                    placeholder="请选择面试职位"
                    v-model.trim="form.interviewPost"
                    @change="postNameChange"
                    style="width: 274px"
                  >
                    <el-option v-for="item in postNameList" :key="item" :label="item" :value="item"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="5">
                <el-form-item label="级别" prop="postLevel" class="dutyM">
                  <el-select placeholder="请选择级别" v-model.trim="form.postLevel" style="width: 274px">
                    <el-option
                      v-for="item in postLevelList"
                      :key="item"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item label="入职情况" prop="entryStatus" style="margin-bottom: 10px;">
                  <el-select v-model.trim="form.entryStatus" placeholder="请选择是否入职">
                    <el-option
                      v-for="item in status"
                      :key="item.value"
                      :label="item.value"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item label="入职时间" prop="entryTime" style="margin-bottom: 10px;">
                  <el-col class="interviewTime1">
                    <el-date-picker
                      width="137px"
                      v-model="form.entryTime"
                      type="date"
                      value-format="yyyy-MM-dd"
                      format="yyyy-MM-dd"
                      placeholder="请选择入职时间"
                    ></el-date-picker>
                  </el-col>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item label="进场时间" prop="reporyTime" style="margin-bottom: 10px;">
                  <el-col class="interviewTime1">
                    <el-date-picker
                      width="137px"
                      v-model="form.reporyTime"
                      type="date"
                      value-format="yyyy-MM-dd"
                      format="yyyy-MM-dd"
                      placeholder="请选择进场时间"
                    ></el-date-picker>
                  </el-col>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item class="button">
              <el-button class="save" :disabled="once" @click="submitForm('form')">保存</el-button>
              <el-button class="cancel" @click="cancelForm">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import axios from "axios";
import moment from "moment";
import qs from "qs";

export default {
  name: "eentryadd",
  props: {
    userName: {
      type: String
    }
  },
  data() {
    var liaisonMail = (rule, value, callback) => {
      const mailReg = /^[A-Za-z\d]+(([-_.]*)+[A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
      if (!value) {
        return callback(new Error("邮箱不能为空"));
      }
      setTimeout(() => {
        if (mailReg.test(value)) {
          callback();
        } else {
          callback(new Error("请输入正确的邮箱格式"));
        }
      }, 100);
    };
    //校验座机以及手机号
    var checkphone = (rule, value, callback) => {
      if (value) {
        var re = /(^0\d{2,4}\-\d{7,8}$)|(^1[3|4|5|6|7|8|9][0-9]{9}$)/;
        setTimeout(() => {
          if (!re.test(value)) {
            callback(new Error("请输入正确的联系方式"));
            return false;
          } else {
            callback();
          }
        }, 1000);
      }
    };
    return {
      originlist: [
        {
          value: "智联"
        },
        {
          value: "前程无忧"
        },
        {
          value: "猎聘"
        },
        {
          value: "boss"
        },
        {
          value: "中华英才"
        },
        {
          value: "拉钩"
        },
        {
          value: "其他"
        }
      ],
      status: [
        {
          value: "是"
        },
        {
          value: "否"
        }
      ],
      PhoneRules: [{ validator: checkphone, trigger: "blur" }],
      EmailRules: [{ validator: liaisonMail, trigger: "blur" }],
      customerNa: [],
      postNameList: [],
      postLevelList: [],
      editBool: false,
      labelPosition: "top",
      once: false,
      form: {
        push: "",
        customerName: "",
        origin: "",
        sex: "",
        name: "",
        phone: "",
        email: "",
        interviewPost: "",
        postLevel: "",
        entryStatus: "",
        entryTime: "",
        reporyTime: "",
        username: ""
      },
      rules: {
        push: [
          { required: true, message: "请选择是否推送", trigger: "change" }
        ],
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        customerName: [
          { required: true, message: "请选择客户名称", trigger: "change" }
        ],
        origin: [
          { required: true, message: "请选择简历来源", trigger: "change" }
        ],
        interviewPost: [
          { required: false, message: "请选择面试职位", trigger: "change" }
        ],
        postLevel: [
          {
            required: true,
            message: "请选择级别",
            trigger: "change"
          }
        ],
        entryStatus: [
          { required: true, message: "请选择入职情况", trigger: "change" }
        ],
        entryTime: [
          { required: true, message: "请选择入职时间", trigger: "change" }
        ],
        reporyTime: [
          { required: true, message: "请选择进场时间", trigger: "blur" }
        ]
      },
      once: false
    };
  },
  created() {
    this.initdata();
    axios
      .get(this.url + "/demand/getCustomerNames") // 客户名称下拉列表请求
      .then(res => {
        this.unlogin(res.data.code);
        if (res.data.code == 200) {
          this.customerNa = res.data.data;
        }
      });
  },
  methods: {
    postHandler() {
      for (let i = 0, l = this.customerNa.length; i < l; i++) {
        if (this.customerNa[i].name === this.form.customerName) {
          this.cusId = this.customerNa[i].id;
        }
      }
      this.form.interviewPost = "";
      this.form.postLevel = "";
      // 职位名称下拉框请求
      axios
        .post(this.url + "/demand/getPostNameByCustomerId", {
          customerId: this.cusId + ""
        })
        .then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.postNameList = res.data.data;
          }
        });
    },
    postNameChange() {
      this.form.postLevel = "";
      //职位级别下拉框请求
      axios
        .post(this.url + "/demand/getPostLevelByNameAndCustomerId", {
          postName: this.form.interviewPost + "",
          customerId: this.cusId + ""
        })
        .then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.postLevelList = res.data.data;
          }
        });
    },
    initdata() {
      this.form = {
        push: "",
        customerName: "",
        origin: "",
        sex: "",
        name: "",
        phone: "",
        email: "",
        interviewPost: "",
        postLevel: "",
        entryStatus: "",
        entryTime: "",
        reporyTime: "",
        username: this.userName
      };
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.once = true;
          axios
            .post(this.url + "/workrecord/addentrydata", this.form)
            .then(res => {
              this.unlogin(res.data.code);
              if (res.data.code == 200) {
                this.$emit("postSucess2");
                this.once = false;
              }
            });
        }
      });
    },
    cancelForm() {
      this.$emit("hide");
    }
  }
};
</script>
<style scoped>
/* .Line {
    border: 0.5px solid #e8e8e8;
    margin-top: 6px;
    margin-bottom: 20px;
  } */

.save {
  width: 150px;
  height: 40px;
  font-size: 16px;
  color: #fff;
  border-radius: 4px;
  margin-right: 43px;
  background: linear-gradient(to bottom, #5696f8 0%, #4e6ef5 100%);
}

.cancel {
  width: 150px;
  height: 40px;
  border: 1px solid #4e6ef5;
  font-size: 16px;
  font-weight: 500;
  color: #4e6ef5;
}

.posttable i,
span {
  cursor: pointer;
  font-weight: 700;
}

.posttable i {
  cursor: pointer;
}
</style>
